



<template>
  <div class="all">
    <el-container class="all_content">
      <Sidebar />
      <el-container class="all_main">
        <el-header class="head">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item class="item"><span class="t">用户信息</span></el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main class="main">
          <div class="container">
            <el-descriptions
                direction="vertical"
                border
                style="margin: 20px auto; width: 80%"
            >
              <el-descriptions-item
                  :rowspan="2"
                  :width="140"
                  label="头像"
                  align="center"
              >
                <el-image
                    style="width: 100px; height: 100px"
                    :src="'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                    fit="cover"
                />
              </el-descriptions-item>
              <el-descriptions-item label="用户名"><span style="font-family: 'Microsoft YaHei';">{{ userInfo.username }}</span></el-descriptions-item>
              <el-descriptions-item label="登录时间"><span style="font-family: 'Microsoft YaHei'; ">{{ formatLoginTime(userInfo.lastLoginTime) }}</span></el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag type="success" size="small">&nbsp;已登录&nbsp;</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-button
                    type="danger"
                    plain
                    @click="handleLogout"
                >
                 &nbsp;退出登录&nbsp;
                </el-button>
              </el-descriptions-item>
            </el-descriptions>
          </div>


        </el-main>
      </el-container>
    </el-container>


  </div>
</template>
<script setup>
import Sidebar from '@/components/Sidebar.vue';
import {ref, computed, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'

const router = useRouter()


const userInfo = computed(() => {
  const info = localStorage.getItem('userInfo')
  return info ? JSON.parse(info) : null
})


onMounted(() => {
  if (!userInfo.value) {
    router.replace('/Login')
    ElMessage.warning('请先登录')
  }
})


const formatLoginTime = (timeStr) => {
  if (!timeStr) return '未知'
  const date = new Date(timeStr)
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}


const handleLogout = () => {
  localStorage.removeItem('userInfo')
  localStorage.removeItem('token')
  window.history.replaceState(null, null, '/login')
  router.replace('/Login')
  ElMessage.success('已成功退出登录')
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vh;
}

.all {
  width: 100%;
  height: 100%;
}

.all_content {
  display: flex;
  height: 100vh;
  width: 100%;
}

.all_main {
  width: 100vh;
  padding: 0px;
  margin: 0px;
}

.head {
  width: 100%;
  height: 4vh;
  display: flex;
  align-items: center;
  border-bottom: solid 1px rgba(204, 204, 204, 0.66);
}

.main {
  width: 100%;
}

.item {
  padding-left: 30px;
}

.t {
  color: #090909;
  font-size: 18px;
  font-weight: 500;
}




</style>